import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import "./reset.css";
import "./index.css";
import Loading from "../../components/Loading";
class Search extends Component {
  state = {
    hotList: [],
    goodsName: [],
    recordGoods: [],
    value: 0
  };
  render() {
    return (
      <div className="hg_search">
        {this.state.hotList.length === 0 ? <Loading /> : " "}
        <div className="s_top">
          <div
            className="s_back"
            onClick={() => {
              this.props.history.go(-1);
            }}
          >
            <img
              src="http://www.hangowa.com/wap/images/arrow_left_b.png"
              alt=" "
            />
          </div>
          <div>
            <input
              type="text"
              name="search"
              value={this.state.goodsName}
              onChange={this.handleChg}
              placeholder="请输入关键字"
              className="s_search_goods"
            />
          </div>
          <div className="s_button" onClick={this.handleReg}>
            <button
              className="button_s"
              onClick={() => {
                let goodsName = this.state.goodsName;
                let Noname = "牛肉干";
                if (goodsName.length === 0) {
                  this.props.history.push(`/searchgoods/${Noname}`);
                } else {
                  this.props.history.push(`/searchgoods/${goodsName}`);
                }
              }}
              // eslint-disable-next-line react/jsx-no-duplicate-props
            >
              搜索
              {/* <NavLink to={`/searchgoods/${this.state.goodsName}`}>
                搜索
              </NavLink> */}
            </button>
          </div>
        </div>

        <div className="s_nan">
          <h2>热门搜索</h2>

          <div className={"s_hot"}>
            {this.state.hotList.map((item, index) => {
              return (
                <span className="s_hot_goods" key={index}>
                  <NavLink to={`/searchgoods/${item}`}>{item}</NavLink>
                </span>
              );
            })}
          </div>
        </div>

        <div className="s_record">
          <div className="record">
            <h2>搜索记录</h2>
            <div className={this.state.value === 0 ? "r_goods" : "r_goods_no"}>
              {this.state.recordGoods.map((item, index) => {
                return (
                  <span key={item.id}>
                    <NavLink to={`/searchgoods/${item.goodsname}`}>
                      {item.goodsname}
                    </NavLink>
                  </span>
                );
              })}
            </div>
          </div>
        </div>

        <div className="s_empty">
          <button
            className="empty_button"
            onClick={() => {
              this.setState({
                value: +1
              });
            }}
          >
            清空记录
          </button>
        </div>
      </div>
    );
  }

  gethotList() {
    fetch(
      "http://www.hangowa.com/mo_bile/index.php?act=index&op=search_key_list"
    )
      .then(response => response.json())
      .then(res => {
        console.log(res.datas);
        if (res.code === 200) {
          this.setState({
            hotList: res.datas.list
          });
        } else {
          alert(res.msg);
        }
      });
  }
  getRecord() {
    fetch("http://localhost:9000/searchGoods")
      .then(response => response.json())
      .then(res => {
        console.log(res);
        this.setState({
          recordGoods: res
        });
      });
  }
  handleReg = () => {
    fetch("http://localhost:9000/searchGoods", {
      method: "POST",
      body: JSON.stringify({
        goodsname: this.state.goodsName
      }),
      headers: {
        "content-type": "application/json"
      }
    });
  };
  handleChg = event => {
    console.log(event.target.value);

    let value = event.target.value;
    // let goodsname = value.length === 0 ? latiao : value;
    this.setState({
      goodsName: value
    });
  };
  componentDidMount() {
    this.gethotList();
    this.getRecord();
  }
}
export default Search;
